<script setup lang="tsx">
import { onMounted, ref } from "vue";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import { AppInfo, getAppList, validateTimeExpression } from "@/api/job";
import { addDialog } from "@/components/ReDialog/index";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: "",
    appId: "",
    jobName: "",
    jobDescription: "",
    jobParams: "",
    timeExpressionType: "",
    timeExpression: "",
    processorInfo: "",
    status: "NORMAL",
    instanceTimeLimit: 0,
    retryTimes: 0,
    lifecycleRange: ["", ""],
    logConfig: {
      type: "",
      level: ""
    }
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);
const appInfos = ref<AppInfo[]>([]);

function getRef() {
  return ruleFormRef.value;
}

onMounted(() => {
  getAppList().then(res => {
    appInfos.value = res;
  });
});

const timeExpressionPlaceHolder = ref<String>("请输入时间表达式");
function changeTimeExpressionType(val: string) {
  if (val === "CRON") {
    timeExpressionPlaceHolder.value = "请输入CRON表达式";
  } else if (val === "FIXED_RATE") {
    timeExpressionPlaceHolder.value = "请输入时间间隔(毫秒)";
  } else if (val === "FIXED_DELAY") {
    timeExpressionPlaceHolder.value = "请输入延迟时间(毫秒)";
  }
}
function validateTimeExpressionInput() {
  validateTimeExpression({
    timeExpressionType: newFormInline.value.timeExpressionType,
    timeExpression: newFormInline.value.timeExpression
  }).then(res => {
    let msg = [];
    res.forEach(item => {
      msg.push(<li> {item} </li>);
    });
    addDialog({
      title: "校验结果",
      hideFooter: true,
      contentRenderer: () => {
        return <p>{msg}</p>;
      }
    });
  });
}

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="160px"
  >
    <el-form-item label="任务名称" prop="jobName">
      <el-input
        v-model="newFormInline.jobName"
        clearable
        placeholder="请输入任务名称"
      />
    </el-form-item>
    <el-form-item label="任务描述" prop="jobDescription">
      <el-input
        v-model="newFormInline.jobDescription"
        clearable
        placeholder="请输入任务描述"
        type="textarea"
      />
    </el-form-item>
    <el-form-item label="所属应用" prop="appId">
      <el-select
        v-model="newFormInline.appId"
        filterable
        placeholder="请选择所属应用"
      >
        <el-option
          v-for="item in appInfos"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="任务参数">
      <el-input v-model="newFormInline.jobParams" clearable type="textarea" />
    </el-form-item>
    <el-form-item label="触发类型" prop="timeExpressionType">
      <el-select
        v-model="newFormInline.timeExpressionType"
        filterable
        placeholder="请选择触发类型"
        @change="
          val => {
            changeTimeExpressionType(val);
          }
        "
      >
        <el-option key="CRON" label="CRON" value="CRON" />
        <el-option key="API" label="API" value="API" />
        <el-option key="FIXED_RATE" label="固定频率" value="FIXED_RATE" />
        <el-option key="FIXED_DELAY" label="固定延迟" value="FIXED_DELAY" />
      </el-select>
    </el-form-item>
    <el-form-item
      v-if="newFormInline.timeExpressionType != 'API'"
      label="时间表达式"
      prop="timeExpression"
    >
      <div class="code">
        <div class="codeInput">
          <el-input
            v-model="newFormInline.timeExpression"
            clearable
            :placeholder="timeExpressionPlaceHolder"
          />
        </div>
        <el-button @click="validateTimeExpressionInput">校验</el-button>
      </div>
    </el-form-item>
    <el-form-item label="生命周期" prop="lifecycle">
      <el-date-picker
        v-model="newFormInline.lifecycleRange"
        type="datetimerange"
        value-format="x"
        range-separator="至"
        start-placeholder="开始日期时间"
        end-placeholder="结束日期时间"
        :popper-options="{
          placement: 'bottom-start'
        }"
      />
    </el-form-item>
    <el-form-item label="执行器类型">
      <el-select
        v-model="newFormInline.processorType"
        filterable
        placeholder="请选择执行器类型"
      >
        <el-option key="BUILT_IN" label="内建" value="BUILT_IN" />
        <el-option key="EXTERNAL" label="外建" value="EXTERNAL" />
      </el-select>
    </el-form-item>
    <el-form-item label="执行器信息" prop="processorInfo">
      <el-input
        v-model="newFormInline.processorInfo"
        clearable
        placeholder="请输入执行器信息"
      />
    </el-form-item>
    <el-form-item label="运行时间限制(毫秒)" prop="instanceTimeLimit">
      <el-input
        v-model="newFormInline.instanceTimeLimit"
        clearable
        oninput="value=value.replace(/[^0-9]/g,'')"
        placeholder="请输入毫秒值"
      />
    </el-form-item>
    <el-form-item label="重试次数" prop="contextPath">
      <el-input-number v-model="newFormInline.retryTimes" clearable />
    </el-form-item>
    <el-form-item label="日志类型" prop="contextPath">
      <el-select
        v-model="newFormInline.logConfig.type"
        filterable
        placeholder="请选择日志类型"
      >
        <el-option key="ONLINE" value="ONLINE" />
        <el-option key="LOCAL" value="LOCAL" />
        <el-option key="LOCAL_AND_ONLINE" value="LOCAL_AND_ONLINE" />
      </el-select>
    </el-form-item>
    <el-form-item label="日志级别" prop="contextPath">
      <el-select
        v-model="newFormInline.logConfig.level"
        filterable
        placeholder="请选择日志级别"
      >
        <el-option key="DEBUG" value="DEBUG" />
        <el-option key="INFO" value="INFO" />
        <el-option key="WARN" value="WARN" />
        <el-option key="ERROR" value="ERROR" />
      </el-select>
    </el-form-item>
  </el-form>
</template>
<style lang="scss" scoped>
.code {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.codeInput {
  width: 230px;
  height: 35px;
  line-height: 35px;
  background-color: #fff;
}
</style>
